<template>
  <div class="h-[100%]">
    <div class="flex justify-between items-center h-[32px]">
      <div class="flex items-center">
        <SvgIcon icon-class="renwu" />
        <span class="ml-[4px] font-bold">待处理</span>
      </div>
      <div class="flex text-[14px] text-[#4e4e4e]">
        <el-select v-model="value" placeholder="请选择" @change="handleChange" class="w-[150px]">
          <el-option
            v-for="item in sysSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div class="overflow-auto list">
      <list :data="sysList" />
    </div>
  </div>
</template>
<script setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import {
  getOmsWaitStatistic,
  getGoodsWaitStatistic,
  getTcsWaitStatistic,
  getBaseWaitStatistic
} from "@/api/system/user.js";
import List from "./list.vue";
const value = ref("");
const list = ref([]);
const sysSelect = ref([]);
const sysList = ref([]);
const getList = () => {
  Promise.allSettled([
    getOmsWaitStatistic(),
    getGoodsWaitStatistic(),
    getTcsWaitStatistic(),
    getBaseWaitStatistic()
  ]).then((res) => {
    let arr = [];
    arr.push({ sys: "订单系统" });
    res.forEach((item) => {
      if (item.status === "fulfilled") {
        arr.push(...item.value.data);
      }
    });

    sysSelect.value = [];
    sysSelect.value.push({ label: "全部", value: "" });
    list.value = arr
      ?.reduce((result, item) => {
        const existingGroup = result?.find((group) => group.name === item.sys);
        if (existingGroup) {
          if (item.url) {
            existingGroup.sub.push(item);
          }
        } else {
          result.push({
            name: item.sys,
            sub: item?.url ? [item] : [],
          });
          sysSelect.value.push({ label: item.sys, value: item.sys });
        }
        return result;
      }, [])
      .map((group) => {
        group.sub = group.sub.filter((subItem) => subItem.count !== 0);
        return group;
      });
    sysList.value = list.value;
  });
};
getList();
const handleChange = (val) => {
  if (!val) {
    sysList.value = list.value;
    return;
  }
  const result = list.value.find((item) => item.name === val);
  sysList.value = [result];
};
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  background: var(--base-home-time-color);
  box-shadow: none;
}
.list {
  height: calc(100% - 28px);
}
</style>
